<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-1.12.4.js"></script>
</head>
<body>
    <table id="table" border="1" cellpadding="5" cellspacing="0" bordercolor="red">
        <tr>
            <td>id</td>
            <td>姓名</td>
            <td>年龄</td>
        </tr>
    </table>
    <input type="button" value="get请求" id="getBtn">
    <input type="button" value="post请求" id="postBtn">
</body>
<script>

    $("#getBtn").click(function () {
        //匿名函数是 成功的回调函数
        //回调函数（钩子函数）:不需要手动调用，由某事件触发
        //data 后端响应的数据
        // $.get("/testservlet?id=1",function(data){
        //     // console.log(data);
        //     // console.log(data.id);
        //     // console.log(data.name);
        //     // console.log(data.age);
        //     //创建tr
        //     let tr = $("<tr></tr>");
        //     //创建三个td
        //     let td1 = $("<td></td>");
        //     //给td设置文本
        //     td1.text(data.id);
        //     let td2 = $("<td></td>");
        //     td2.text(data.name);
        //     let td3 = $("<td></td>");
        //     td3.text(data.age);
        //     //把td添加到tr
        //     tr.append(td1);
        //     tr.append(td2);
        //     tr.append(td3);
        //     //把tr添加 table
        //     $("#table").append(tr);
        // });

        // $.ajax({
        //     type: "get/post",
        //     url: ""
        //     data:"要传到后端的数据",
        //     dataType: "数据格式",
        //     contentType: "响应的数据格式",
        //     success: function(data){  //成功的回调 ， data就是响应的数据
        //
        //     },
        //     error:function(data){//失败的回调, data 响应失败的消息
        //
        //     }
        // });
        $.ajax({
            type:"get",
            url: "/testservlet?id=1",
            contextType: "application/json",
            success: function(data) {
                //创建tr
                let tr = $("<tr></tr>");
//创建三个td
                let td1 = $("<td></td>");
//给td设置文本
                td1.text(data.id);
                let td2 = $("<td></td>");
                td2.text(data.name);
                let td3 = $("<td></td>");
                td3.text(data.age);
//把td添加到tr
                tr.append(td1);
                tr.append(td2);
                tr.append(td3);
//把tr添加 table
                $("#table").append(tr);
            },
            error: function(data) {
                console.log("后端执行错误");
            }

        });
    });

    let param = '{"id": 1, "name":  "zhangsan"}';

    $("#postBtn").click(function () {
        // $.post("/testservlet",param , function (data) {
        //     alert(data);
        // });

        $.ajax({
            type: "post",
            url:"testservlet",
            data: param,
            dataType: "application/json",
            success:function(data){
                alert(data);
            }
        });
    });
</script>
</html>